<template>
	<view class="ms_bg">
		<view class="" @click="goBack()">
			<u-icon name="arrow-left" class="fan" color="#fff" size="50" ></u-icon>
		</view>
		<view class="contert">
			<!-- 背景图 -->
			<view class="top">
				<image src="../../static/sale/miaosha.png" mode="widthFix">
					<view class="sale_time">
						<!-- <image src="../../../static/sale/time.png" mode=""></image> -->
					</view>
				</image>
			</view>
			<view class="ms_box" v-for="(item,index) in list">
				<!-- <view class="ms_progress">
					<view style="width: 198rpx;" @click="select(1)"></view>
					<view style="width: 198rpx;" @click="select(2)"></view>
					<view style="width: 198rpx;" @click="select(3)"></view>
				</view> -->
				<!-- <view class="select">
					<view :class="is_select==1?'left':'right'" @click="select(1)">
						正在秒杀
					</view>
					<view :class="is_select==2?'left':'right'" @click="select(2)">
						即将秒杀
					</view>
					<view :class="is_select==3?'left':'right'" >
						更多预告
					</view>
				</view> -->
				<view class="titlebox">
					<view class="title">{{item.title}}</view>
					<!-- endTime为结束的时间 startTime为请求到的当前服务端时间  格式YYYY-MM-DD HH:mm:ss-->
					<countdown :endTime="item.end_time" :startTime="item.start_time"/>
				</view>
				<view class="footer" v-for="(it,i) in item.seckill_product" >
					<view class="footer_item" >
						<view class="footer_left">
							<image :src="it.product.image.file_path" class="footer_img" mode=""></image>
						</view>
						<view class="footer_right"  >
							<view class="footer_con">
								<view class="footer_top">
									{{it.product.goods_name}}
								</view>
								<view class="footer_center">
								</view>
								<view class="footer_fot">
									<view class="footer_it">
										<text class="fotter_miao">秒杀价</text>
										<text class="footer_jia">￥{{it.price}}</text>
									</view>
									<view class="footer_quick" @click="to(it.id)">
										马上抢
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg_bottom"></view>
	</view>
</template>
<script>
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import {mslist}from"../../api/product.js"
	export default{
		data(){
			return{
				is_select: 1,
				list:"",
				endTime:"",
				newTime:""
			}
		},
		components: {
			countdown
		},
		onShow() {
			this.getList()
		},
		methods:{
			select(type) {
				console.log(type)
				this.is_select = type;
				this.getList()
			},
			goBack(){
				uni.switchTab({
					url:'/pages/mall/mall'
				})
			},
			async getList(){
				let url="";
				// if(this.is_select==1){
				// 	url=miaoshan
				// }
				// if(this.is_select==2){
				// 	url=waitmiaosha
				// }
				let res=await this.post(mslist)
				// res.data.forEach(item=>{
				// 	item.endTime=this.$u.timeFormat(item.secKillEndTime, 'yyyy-mm-dd hh:MM:ss')
				// 	item.newTime=this.$u.timeFormat(item.orderRequestTime, 'yyyy-mm-dd hh:MM:ss')
				// })
				this.list=res.data.data
			},
			to(id){
				uni.navigateTo({
					url:"../product/msproduct?ms=true&id="+id
				})
				// if(this.is_select==1){
				// 	this.msg("报名成功!")
				// 	// uni.navigateTo({
				// 	// 	url:'/pages/product/detail?type=4&id='+id
				// 	// })
				// }
				// if(this.is_select==2){
				// 	this.msg("请您等待秒杀开启...","none")
				// }
			}
		}
	}
</script>
<style lang="scss">
	.titlebox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
	}
	.title{
		font-size: 40rpx;
		font-weight: bold;
		color:#4F129A ;
	}
	.bg_bottom {
		margin-top: 220rpx;
		left: 0upx;
		bottom: 0upx;
		width: 100%;
		height: 200rpx;
		background: url(../../static/sale/footer.png);
		background-repeat: no-repeat;
		background-size: 750rpx 200rpx;
	
	}
	.footer{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 0 32rpx;
		.footer_item{
			width: 610rpx;
			height: 283rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 30rpx;
			.footer_left{
				float: left;
				position: relative;
				width: 280rpx;
				height: 100%;
				.footer_img{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 196rpx;
					height: 196rpx;
				}
			}
			.footer_right{
				float: right;
				width: calc(100% - 280rpx);
				height: 100%;
				.footer_con{
					padding: 30rpx 10rpx 0 0;
					.footer_top{
						font-weight: 700;
						height:90rpx ;
						line-height: 45rpx;
						overflow: hidden;  
						text-overflow: ellipsis;  
						display: -webkit-box;  
						-webkit-line-clamp: 2;  
						-webkit-box-orient: vertical;
					}
					.footer_center{
						width: 81rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						// text-decoration: line-through;
						color: #999999;
						line-height: 48rpx;
						margin-bottom: 20rpx;
					}
					.footer_fot{
						display: flex;
						justify-content: space-between;
						.footer_it{
							display: flex;
							flex-direction: column;
							.fotter_miao{
								width: 108rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #F0812D;
								line-height: 36rpx;
							}
							.footer_jia{
								width: 108rpx;
								height: 56rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 700;
								color: #F0812D;
								line-height: 36rpx;
							}
						}
						.footer_quick{
							width: 173rpx;
							height: 66rpx;
							background: linear-gradient(247deg, #FE6F52, #F3C44E, #F18D29);
							border-radius: 33rpx;
							text-align: center;
							line-height: 66rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
	.ms_bg {
		background-color: #F3C44E !important;
		position: relative;
		.fan{
			position: absolute;
			top:calc(26rpx + var(--status-bar-height));
			left: 20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index:222
		}
	}
	
	page {
		background-color: #F3C44E !important;
	}
	.contert {
		// height:1000upx;
		width: 100%;
		// background-color: #F1BAB0;
		// background-color: #7B1AF0;
	}
	.top {
		width: 100%;
		height: 550upx;
		position: relative;
		image {
			width: 100%;
			// height: 100%;
			z-index: 0;
		}
		.sale_time{
			position: absolute;
			bottom: -234rpx;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
			width: 406rpx;
			height: 70rpx;
			image{
				width: 406rpx;
				height: 70rpx;
			}
		}
	}
	.ms_box {
		width: 670rpx;
		// height: 1366px;
		background-color: #F18D29 !important;
		border: 4rpx solid #FEF7A7;
		// border-image: linear-gradient(0deg, #FFC34A, #FEF7A7) 4 4;
		border-radius: 20rpx;
		background-color: transparent;
		background-clip: padding-box;
		margin: 0 auto 40rpx;
		position: relative;
		top: 180rpx;
		left: 0rpx;
		overflow: hidden;
		padding-bottom: 40rpx;
		
	}
	
	.ms_box:after {
		content: "";
		display: block;
		position: absolute;
		top: -4rpx;
		right: -4rpx;
		bottom: -4rpx;
		left: -4rpx;
		border-top-right-radius: 20rpx;
		border-radius: 20rpx;
		border-image: linear-gradient(0deg, #FFC34A, #FEF7A7);
		z-index: -1;
	}
	.ms_progress {
		background: url(../../static/sale/loading.png);
		background-repeat: no-repeat;
		background-size: 594rpx 97rpx;
		height: 200rpx;
		// width: 594rpx;
		position: relative;
		left: 40rpx;
		top: 90rpx;
		display: flex;
		justify-content: space-around;
	}
	.select {
		height: 130upx;
		width: 100%;
		background: #7B1AF0;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		justify-content: space-between;
	}
	.select {
		width: 100%;
		height: 80upx;
		background-color: rgba(0, 0, 0, 0) !important;
	
		.left {
			float: left;
			width: 50%;
			// background-color:rgb(99, 50, 187);
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color: #FEF7A7;
			box-sizing: border-box;
			border-radius: 4rpx;
			overflow: hidden;
	
		}
	
		.right {
			float: left;
			width: 50%;
			height: 80upx;
			color: #FEFEFE;
			line-height: 80upx;
			text-align: center;
			// background: rgb(99, 50, 187);
		}
	
		.right1 {
			float: left;
			width: 33.333%;
			height: 80upx;
			color: #FFF;
			line-height: 80upx;
			text-align: center;
			// background: linear-gradient(165deg, rgba(255, 105, 109, 1) 0%, rgba(255, 56, 59, 1) 100%);
		}
		
	}
</style>